<template>
    <div class="ccui-home-index">
        <div class="ccui-app-container">
            <!-- 高级搜索 -->
            <div class="ccui-advanced-search-wrapper ccui-clearfix">
                <el-search
                    :formProp="formData"
                    @search="search"
                    @change="change"
                    :isShowSearch="true"
                    :selectClear="true"
                    class="ccui-highsearch no-print"
                >
                    <!-- <anchorTitle
                                isList
                                :totalNum="totalNum"
                                :tabBtn="tableTopBtn"
                                :isFocus="isFocus"
                                @tabBtnChange="tableTopChange"
                              /> -->
                    <div class="ccui-tab-wrapper">
                        <el-button
                            :type="isActive === index ? 'table-top-active' : 'table-top'"
                            size="mini"
                            v-for="(item, index) in focuses"
                            :key="'tab' + index"
                            @click="tabChange(item.focus)"
                        >
                            <template v-if="item.focus === 'all'">全部</template>
                            <template v-else-if="item.focus === 'unsubmitted'"
                            >待提交
                            </template>
                            <template v-else-if="item.focus === 'approval'"
                            >审批中({{ totalNum }})
                            </template>
                            
                            <template v-else-if="item.focus === 'return'">审批退回</template>
                        </el-button>
                    </div>
                    <div class="ccui-extend-btn">
                        <el-button
                            type="primary"
                            ref="pcconclease-new-item"
                            @click="handleGoNew"
                            icon="icon-ccui-add-sup"
                        >新增
                        </el-button>
                    </div>
                    <template slot="search">
                        <el-input
                            v-model.trim="formData.settlementName"
                            clearable
                            searchLabel="结算单名称"
                            placeholder="请输入结算单名称模糊查询"
                            @blur="handleTrim('settlementName')"
                        />
        
                        <el-input
                            v-model.trim="formData.settlementCode"
                            clearable
                            searchLabel="结算单编号"
                            placeholder="请输入结算单编号模糊查询"
                        />
        
                        <el-input
                            v-model.trim="formData.contractCode"
                            clearable
                            searchLabel="合同编号"
                            placeholder="请输入合同编号模糊查询"
                        />
        
                        <el-input
                            v-model.trim="formData.formalContractCode"
                            clearable
                            searchLabel="合同正式编号"
                            placeholder="请输入合同正式编号模糊查询"
                        />
        
                        <el-date-picker
                            v-model="formData.paymentApplyDate"
                            searchLabel="结算期间"
                            clearable
                            type="daterange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            format="yyyy-MM-dd"
                            value-format="yyyy-MM-dd"
                            slot="searchItem4"
                        />
        
                        <el-input
                            v-model.trim="formData.supplierName"
                            clearable
                            searchLabel="供应商"
                            placeholder="请输入供应商模糊查询"
                        />
                    </template>
    
                    <el-input
                        v-model.trim="formData.settlementName"
                        clearable
                        searchLabel="结算单名称"
                        placeholder="请输入结算单名称模糊查询"
                        slot="searchItem1"
                        @blur="handleTrim('settlementName')"
                    />
                    <el-input
                        v-model.trim="formData.settlementCode"
                        clearable
                        searchLabel="结算单编号"
                        placeholder="请输入结算单编号模糊查询"
                        slot="searchItem2"
                    />
                    <el-input
                        v-model.trim="formData.contractCode"
                        clearable
                        searchLabel="合同编号"
                        placeholder="请输入合同编号模糊查询"
                        slot="searchItem3"
                    />
                    <el-input
                        v-model.trim="formData.formalContractCode"
                        clearable
                        searchLabel="合同正式编号"
                        placeholder="请输入合同正式编号模糊查询"
                        slot="searchItem4"
                    />
                    <el-date-picker
                        v-model="formData.paymentApplyDate"
                        searchLabel="结算期间"
                        clearable
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        format="yyyy-MM-dd"
                        value-format="yyyy-MM-dd"
                        slot="searchItem5"
                    />
    
                    <el-input
                        v-model.trim="formData.supplierName"
                        clearable
                        searchLabel="供应商"
                        placeholder="请输入供应商模糊查询"
                        slot="searchItem6"
                    />
                </el-search>
            </div>
            <!-- table表格 -->
            <div class="ccui-multifunctional-table-wrapper">
                <el-table
                    :data="tableData"
                    :fit="true"
                    :cell-style="cellStyle"
                    border
                    class="ccui-multifunctional-table"
                    @header-dragend="tableTitleWidth"
                    @row-click="handleRowClick"
                    :cell-class-name="addClass"
                >
                    <el-table-column label="序号" width="50" fixed>
                        <template slot-scope="scope">
                            <span>{{ scope.$index + 1 }}</span>
                        </template>
                    </el-table-column>
                    
                    <template v-for="(table, index) in tableTheadOptions">
                        <el-table-column
                            :fixed="table.fixed || false"
                            :key="index"
                            :type="table.type"
                            :label="table.label"
                            :min-width="table.width"
                            :prop="table.prop"
                            :align="table.align || 'left'"
                            :header-align="table.headerAlign || 'left'"
                            :filters="table.filters"
                            :formatter="formatterList[table.formatterName]"
                            :show-overflow-tooltip="true"
                        >
                        </el-table-column>
                    </template>
                    
                    <el-table-column label="操作" width="50" fixed="right">
                        <template slot-scope="{ row }">
                            <!-- <el-button size="mini" type="text" @click="goDetail(row, 1)"
                                            >查看</el-button
                                          > -->
                            <el-button v-if="row.billSource != 10" size="mini" type="text" @click="getRevoke(row, 1)"
                            >撤回
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="ccui-table-footer" v-show="tableData.length > 0">
                    <div id="ccui-paging">
                        <el-pagination
                            :total="totalNum"
                            :page-size="pageSizeCode"
                            :current-page="pageNoCode"
                            :page-sizes="[10, 20, 50, 100, 200, 500]"
                            background
                            layout="total, sizes, prev, pager, next, jumper"
                            popper-class="ccui-paging-page-size-popper"
                            @prev-click="handlePrev"
                            @next-click="handleNext"
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                        />
                        <el-button
                            class="ccui-pagination-btn"
                            size="mini"
                            type="default"
                            @click="handleSizeChange('none')"
                        >确定
                        </el-button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import maintenance from "../mixins/settlement-maintenance";
// import anchorTitle from "@/basa/components/public/anchorTitle";
export default {
    // components: {
    //   anchorTitle,
    // },
    name: "settlement-maintenance-approval",
    mixins: [maintenance],
    data() {
        return {
            isActive: 2,
            tableName: this.tableList.settlementMaintenanceApproval
        };
    }
};
</script>

<style lang="scss" scoped>
.ccui-home-index .ccui-statistics-card {
    padding: 0;
}

/deep/ .resAndSug {
    color: rgb(0, 137, 239);
    cursor: pointer;
}
</style>
